<template>
  <UniPopup
    ref="selectMembersRef"
    backgroundColor="#fff"
    :borderRadius="borderRadius"
    :z-index="999"
    @maskClick="handleMaskClick"
  >
    <view class="popup-content" :style="{ borderRadius }">
      <view class="h-48 disFlxCC fz-16 popup-title mb-12">
        <text>选择成员报名</text>
      </view>
      <scroll-view
        class="member-list px-12"
        scroll-y
        :enable-flex="true"
        scroll-with-animation
        scroll-anchoring
        :enhanced="true"
        :show-scrollbar="false"
        @scrolltolower="handleScrollToLower"
      >
        <Paglist
          v-model="dataList"
          :is-init-api="true"
          :isPullDownRefres="false"
          :parame="{
            activityId,
          }"
          @register="register"
          :is-show-loadmore="dataList.length > 1"
        >
          <template v-for="v in dataList" :key="v.phonenumber">
            <view class="member-item mb-12 br-8 pa-16 disFlxJS" @click="handleSelect(v)">
              <view class="disFlxAC">
                <view class="mr-8">
                  <TImage
                    :src="v.avatar"
                    width="80rpx"
                    height="80rpx"
                    border-radius="50%"
                    errorImgType="person"
                  />
                </view>
                <view class="fz-16 mr-8">
                  <text>{{ v.userName }}</text>
                </view>
                <view v-if="v.companyPosition" class="position-tag px-8 py-2 fz-10 br-2 mr-8">
                  <text>{{ v.companyPosition }}</text>
                </view>
                <view
                  v-if="v.approvalStatus === ApprovalStatusEnum.PASSED"
                  class="status-tag px-8 py-2 fz-10 br-2"
                >
                  <text>已报名</text>
                </view>
                <view
                  v-if="v.approvalStatus === ApprovalStatusEnum.UNDERREVIEW"
                  class="status-tag px-8 py-2 fz-10 br-2"
                >
                  <text>审核中</text>
                </view>
              </view>
              <view v-if="v.approvalStatus === ApprovalStatusEnum.REJECT || !v.approvalStatus">
                <text v-if="hasSelected(v)" class="ali-icon fz-20" style="color: #2878ff">
                  &#xe693;
                </text>
                <text v-else class="ali-icon fz-20" style="color: #969799">&#xe690;</text>
              </view>
            </view>
          </template>
        </Paglist>
      </scroll-view>
      <view class="popup-bottom pt-12 px-24" :class="{ 'pb-12': !isNewIphone() }">
        <TButton
          text="选择报名"
          type="primary"
          class="gutter-btn"
          custom-class="h-44 linh-44 br-22 px-16"
          @click="handleSubmit"
        />
      </view>
    </view>
  </UniPopup>
</template>

<script setup lang="ts">
  import UniPopup from '@/uni_modules/uni-popup/components/uni-popup/uni-popup.vue';
  import { propTypes } from '@/utils/propTypes';
  import { getCurrentInstance, provide, ref, watch } from 'vue';
  import TButton from '@/components/TButtonGroup/TButton.vue';
  import Paglist from '@/components/Paglist/index.vue';
  import { useConList } from '@/components/Paglist/useConList';
  import TImage from '@/components/TImage/index.vue';
  import { appRegistration } from '@/api/activity';
  import type { IAppRegistrationRes } from '@/api/activity/types';
  import { ApprovalStatusEnum } from '@/enums/activityStatusEnum';
  import { isNewIphone } from '@/utils/is';

  const props = defineProps({
    visible: propTypes.bool.def(false),
    activityId: propTypes.number,
  });

  const emits = defineEmits(['update:visible', 'submit']);
  const borderRadius = ref('32rpx 32rpx 0px 0px');

  const dataList = ref<IAppRegistrationRes[]>([]);
  provide('api', appRegistration);
  const [register, { addData }] = useConList();
  const selected = ref<IAppRegistrationRes[]>([]);

  watch(
    () => props.visible,
    (val) => (val ? openPopup() : closePopup()),
  );
  const _this = getCurrentInstance();
  const openPopup = (direction: string = 'bottom') => {
    selected.value = [];
    (_this?.refs['selectMembersRef'] as any).open(direction);
  };

  const closePopup = (direction: string = 'bottom') => {
    (_this?.refs['selectMembersRef'] as any).close(direction);
  };
  const handleScrollToLower = () => {
    addData();
  };

  function handleSelect(item: IAppRegistrationRes) {
    if (item.approvalStatus === ApprovalStatusEnum.REJECT || !item.approvalStatus) {
      if (hasSelected(item)) {
        selected.value = selected.value.filter((v) => v.phonenumber !== item.phonenumber);
      } else {
        selected.value.push(item);
      }
    }
  }

  function hasSelected(item: IAppRegistrationRes) {
    return selected.value.some((v) => v.phonenumber === item.phonenumber);
  }

  function handleSubmit() {
    emits('submit', selected.value);
    handleMaskClick();
  }

  function handleMaskClick() {
    emits('update:visible', false);
  }
</script>

<style lang="scss" scoped>
  .popup-content {
    background-color: #f2f3f5;
    overflow: hidden;
    .popup-title {
      width: 100%;
      color: #292928;
      background-color: #fff;
    }
    .member-list {
      width: 100%;
      box-sizing: border-box;
      height: 800rpx;
    }
    .popup-bottom {
      width: 100%;
      box-sizing: border-box;
      background-color: #fff;
    }
    .member-item {
      background-color: #fff;
      height: 142rpx;
      box-sizing: border-box;
      color: #333;
      .position-tag {
        color: #2878ff;
        background-color: #d0f7ff;
      }

      .status-tag {
        border: 1px solid #e29942;
        color: #e29942;
      }
    }
  }
</style>
